<!-- 
组合选择器
    - 特定关系（包含并列）
    - 由【多个】【任意的】基本选择器组合形成的

    1）后代选择器
        - 也称为包含选择器，属于包含、嵌套关系
        - 后代包括：儿子、孙子、重孙...
        - 【空格】分隔
        - 【任意的】是指标签名、类名、ID名都可以

    2）子代选择器
        - 最近一级的子元素：亲儿子和亲儿子的后代
        - 【>】尖括号分隔
        - 【任意的】是指标签名、类名、ID名都可以

    3）并集选择器
        - 集体声明，给多组标签同时定义相同的样式
        - 【,】逗号分隔，表示“和”的意思，书写规范：竖着写
        - 【任意的】是指标签名、类名、ID名、后代选择器、子代选择器都可以
-->

<style>
    /* 后代选择器 */
    ul li {
        color: red;
    }
    ul li a {
        color: orange;
    }
    .nav li a {
        color: cyan;
    }
    /* 子代选择器 */
    #myDiv>div {
        color: red;
    }
    /* 并集选择器 */
    .t1,
    #t2 {
        color: pink;
    }
</style>

<!-- 后代选择器 -->
<ul>
    <li>测试1</li>
    <li><a href="#">测试2</a></li>
    <li>测试3</li>
</ul>

<ul class="nav">
    <li>测试1</li>
    <li><a href="#">测试2</a></li>
    <li>测试3</li>
</ul>

<ol>
    <li>测试1</li>
    <li><a href="#">测试2</a></li>
    <li>测试3</li>
</ol>

<!-- 子代选择器 -->
<div id="myDiv">
    <div>div</div>
    <span>span</span>
    <div>
        <span>div>span</span>
        <p>
            <span>div>p>span</span>
        </p>
    </div>
    <span>
        <span>span>span</span>
        <p>span>p</p>
        <div>span>div</div>
        <div>
            <p>span>div>p</p>
        </div>
    </span>
</div>

<!-- 并集选择器 -->
<p class="t1">p</p>
<div id="t2">div</div>
<div class="t3">div</div>